<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="500px"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="学院" prop="collegeId">
        <college-selector v-model="form.collegeId"></college-selector>
      </el-form-item>
      <el-form-item label="系部" prop="departmentId">
        <departments-selector
          v-model="form.departmentId"
          :college-id="form.collegeId"
        ></departments-selector>
      </el-form-item>

      <el-form-item label="专业" prop="departmentId">
        <professions-selector
          v-model="form.professionId"
          :department-id="form.departmentId"
        ></professions-selector>
      </el-form-item>
      <el-form-item label="班级" prop="classesId">
        <classes-from-selector
          v-model="form.classesId"
          :profession-id="form.professionId"
        ></classes-from-selector>
      </el-form-item>

      <el-form-item label="教室层级" prop="hierarchy">
        <el-select v-model="form.hierarchy" placeholder="请选择教室层级">
          <el-option
            v-for="dict in this.getDictDatas(DICT_TYPE.STUDENT_TRAINING_LEVEL)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="教室分类" prop="typeId">
        <el-select
          v-model="form.typeId"
          placeholder="请选择教室分类"
          filterable
          clearable
        >
          <el-option
            v-for="dict in classroomCategoryList"
            :key="dict.id"
            :label="dict.typeName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="教室名称" prop="classroomName">
        <el-input v-model="form.classroomName" placeholder="请输入教室名称" />
      </el-form-item>
      <el-form-item label="容纳人数" prop="galleryful">
        <el-input
          type="number"
          v-model="form.galleryful"
          placeholder="请输入容纳人数"
        />
      </el-form-item>
      <el-form-item label="教室位置" prop="address">
        <el-input v-model="form.address" placeholder="请输入教室位置" />
      </el-form-item>
      <el-form-item label="" prop="function">
        <!-- <el-input v-model="form.fun" placeholder="请输入功能json" /> -->
        <div>
          <el-tag
            v-for="(item, index) in funJsonList"
            :key="index"
            style="margin-right: 8px"
            >{{ item.functionName }}</el-tag
          >
        </div>
        <div style="display: flex; justify-content: flex-end">
          <el-button @click="showFun = true">添加功能点</el-button>
        </div>
      </el-form-item>
      <!-- <el-form-item label="教室备注" prop="classroomRemark">
        <el-input
          v-model="form.classroomRemark"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>

      <el-form-item label="机构编号" prop="orgId">
        <el-input v-model="form.orgId" placeholder="请输入机构编号" />
      </el-form-item> -->
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <el-dialog
      title="选择"
      :visible.sync="showFun"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group v-model="checkList" @change="handleCheckedFunChange">
        <el-checkbox
          v-for="(item, index) in fun"
          :label="item.id"
          :key="item.id"
          @change="handleChecked($event, index)"
          >{{ item.functionName }}</el-checkbox
        >
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showFun = false">确 定</el-button>
        <el-button @click="showFun = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  createClassroomInfo,
  updateClassroomInfo,
  getClassroomCategory
} from "@/api/collegebase/classroomInfo";
import common from "@/api/collegebase/common";
import { getClassroomFunctionPage } from "@/api/collegebase/classroomFunction";
import CollegeSelector from "@/components/CollegeSelector";
import DepartmentsSelector from "@/components/DepartmentsSelector";
import ProfessionsSelector from "@/components/ProfessionsSelector";
import ClassesFromSelector from "@/components/ClassesFromSelector";
export default {
  name: "ClassroomInfoEdit",
  components: { ClassesFromSelector, ProfessionsSelector, DepartmentsSelector, CollegeSelector },
  data() {
    return {
      showFun: false,
      isIndeterminate: false,
      checkAll: false,
      checkList: [],
      classroomCategoryList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        collegeId: [
          { required: true, message: "请选择学院", trigger: "change" },
        ],
        departmentId: [
          { required: true, message: "请选择系部", trigger: "change" },
        ],
        hierarchy: [
          { required: true, message: "层级不能为空", trigger: "blur" },
        ],
        classesId: [
          { required: true, message: "班级不能为空", trigger: "change" },
        ],
        typeId: [
          { required: true, message: "教室分类不能为空", trigger: "change" },
        ],
        classroomName: [
          { required: true, message: "教室名称不能为空", trigger: "blur" },
        ],
        galleryful: [
          { required: true, message: "容纳人数不能为空", trigger: "blur" },
        ],
      },
      fun: [],
      funJsonList: [],
    };
  },
  created() {
    this.getData();
    // console.log(this.fun)
  },
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false,
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: "",
    },

  },
  methods: {
    handleChecked(_, index) {
      console.log(_, index)
      if (_) {
        this.funJsonList.push(this.fun[index])
      } else {
        this.funJsonList.forEach((e, i) => {
          if (e.id == this.fun[index].id) {
            this.funJsonList.splice(i, 1)
          }
        })
      }

      console.log(this.funJsonList)

    },
    handleCheckAllChange(val) {
      console.log(val)
      this.isIndeterminate = val;
      this.funJsonList = [];
      if (val) {
        this.fun.forEach(e => {
          e.checked = val;
          this.checkList.push(e.id);
          this.funJsonList.push(e)

        })
      } else {
        this.checkList = [];
      }




    },
    handleCheckedFunChange(ids) {
      // console.log(ids)
      // this.fun.forEach(e=>{
      //     if(ids.indexOf(e.id)!=-1){
      //       this.funJsonList.push(e)
      //     }
      // })
      // console.log(this.funJsonList)

    },



    //获取学院
    async getData() {

      const classroomCategory = await getClassroomCategory();
      this.classroomCategoryList = classroomCategory.data;
      const fun = await getClassroomFunctionPage({ pageNo: 1, pageSize: 100 })
      fun.data.list.forEach(e => {
        e.checked = false;
      })
      this.fun = fun.data.list;
      console.log('fun', this.fun)
    },
    /** 初始化编辑的数据**/
    initData(rowData) {
      this.reset();
      if (rowData && rowData.id) {
        this.form = rowData;
        JSON.parse(rowData.fun).forEach(e => {

          this.funJsonList.push(e)
          this.checkList.push(e.id)
        })
        this.$forceUpdate();
        this.form.datetimerange = [this.form.startTime, this.form.endTime];
      }
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("update:show", false);
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        collegeId: undefined,
        departmentId: undefined,
        professionId: undefined,
        hierarchy: undefined,
        classesId: undefined,
        typeId: undefined,
        classroomName: undefined,
        address: undefined,
        function: undefined,
        classroomRemark: undefined,
        galleryful: undefined,
        orgId: undefined,
        remark: undefined,
      };
      this.checkList = [];
      this.funJsonList = [];

      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        // this.funJsonList 根据id去重
        this.funJsonList = this.funJsonList.filter((item, index, arr) => {
          return arr.findIndex(e => e.id == item.id) == index
        })

        this.form.fun = JSON.stringify(this.funJsonList);
        // 修改的提交
        if (this.form.id != null) {
          updateClassroomInfo(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.cancel();
            this.$emit("success");
          });
          return;
        }
        // 添加的提交
        createClassroomInfo(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.cancel();
          this.$emit("success");
        });
      });
    },
  },
};
</script>
